<template>
  <div style="position: relative">
    <div class="verify-img-out">
      <div
        class="verify-img-panel"
        :style="{
          width: setSize.imgWidth,
          height: setSize.imgHeight,
          'background-size': setSize.imgWidth + ' ' + setSize.imgHeight,
          'margin-bottom': vSpace + 'px'
        }"
      >
        <div
          v-show="showRefresh"
          class="verify-refresh"
          style="z-index:3"
          @click="refresh"
        >
          <i class="iconfont icon-refresh" />
        </div>
        <img
          ref="canvas"
          :src="
            pointBackImgBase
              ? 'data:image/png;base64,' + pointBackImgBase
              : defaultImg
          "
          alt=""
          style="width:100%;height:100%;display:block"
          @click="bindingClick ? canvasClick($event) : undefined"
        />

        <div
          v-for="(tempPoint, index) in tempPoints"
          :key="index"
          class="point-area"
          :style="{
            'background-color': '#1abd6c',
            color: '#fff',
            'z-index': 9999,
            width: '20px',
            height: '20px',
            'text-align': 'center',
            'line-height': '20px',
            'border-radius': '50%',
            position: 'absolute',
            top: parseInt(tempPoint.y - 10) + 'px',
            left: parseInt(tempPoint.x - 10) + 'px'
          }"
        >
          {{ index + 1 }}
        </div>
      </div>
    </div>
    <!-- 'height': this.barSize.height, -->
    <div
      class="verify-bar-area"
      :style="{
        width: setSize.imgWidth,
        color: this.barAreaColor,
        'border-color': this.barAreaBorderColor,
        'line-height': this.barSize.height
      }"
    >
      <span class="verify-msg">{{ text }}</span>
    </div>
  </div>
</template>
<script type="text/babel">
/**
 * VerifyPoints
 * @description 点選
 * */
import {
  resetSize,
  _code_chars,
  _code_color1,
  _code_color2
} from "./../utils/util";
import { aesEncrypt } from "./../utils/ase";
// import { ajCaptcha, ajCaptchaCheck } from "../../../api/common";

export default {
  name: "VerifyPoints",
  props: {
    // 弹出式pop，固定fixed
    mode: {
      type: String,
      default: "fixed"
    },
    captchaType: {
      type: String,
      default: "blockPuzzle"
    },
    // 间隔
    vSpace: {
      type: Number,
      default: 5
    },
    imgSize: {
      type: Object,
      default() {
        return {
          width: "310px",
          height: "155px"
        };
      }
    },
    barSize: {
      type: Object,
      default() {
        return {
          width: "310px",
          height: "40px"
        };
      }
    },
    defaultImg: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      secretKey: "", // 后端返回的ase加密秘钥
      checkNum: 3, // 默認需要点击的字数
      fontPos: [], // 選中的坐标信息
      checkPosArr: [], // 用戶点击的坐标
      num: 1, // 点击的记数
      pointBackImgBase: "", // 后端获取到的背景图片
      poinTextList: [], // 后端返回的点击字体顺序
      backToken: "", // 后端返回的token值
      setSize: {
        imgHeight: 0,
        imgWidth: 0,
        barHeight: 0,
        barWidth: 0
      },
      tempPoints: [],
      text: "",
      barAreaColor: undefined,
      barAreaBorderColor: undefined,
      showRefresh: true,
      bindingClick: true
    };
  },
  computed: {
    resetSize() {
      return resetSize;
    }
  },
  watch: {
    // type变化则全面刷新
    type: {
      immediate: true,
      handler() {
        this.init();
      }
    }
  },
  mounted() {
    // 禁止拖拽
    this.$el.onselectstart = function() {
      return false;
    };
  },
  methods: {
    init() {
      // 加載页面
      this.fontPos.splice(0, this.fontPos.length);
      this.checkPosArr.splice(0, this.checkPosArr.length);
      this.num = 1;
      this.getPictrue();
      this.$nextTick(() => {
        this.setSize = this.resetSize(this); // 重新設置宽度高度
        this.$parent.$emit("ready", this);
      });
    },
    canvasClick(e) {
      this.checkPosArr.push(this.getMousePos(this.$refs.canvas, e));
      if (this.num == this.checkNum) {
        this.num = this.createPoint(this.getMousePos(this.$refs.canvas, e));
        // 按比例转换坐标值
        this.checkPosArr = this.pointTransfrom(this.checkPosArr, this.setSize);
        // 等创建坐标执行完
        setTimeout(() => {
          // var flag = this.comparePos(this.fontPos, this.checkPosArr);
          // 發送后端请求
          var captchaVerification = this.secretKey
            ? aesEncrypt(
                this.backToken + "---" + JSON.stringify(this.checkPosArr),
                this.secretKey
              )
            : this.backToken + "---" + JSON.stringify(this.checkPosArr);
          const data = {
            captchaType: this.captchaType,
            pointJson: this.secretKey
              ? aesEncrypt(JSON.stringify(this.checkPosArr), this.secretKey)
              : JSON.stringify(this.checkPosArr),
            token: this.backToken
          };
          this.$axios
            .post(`/ajcheck`, data)
            .then(res => {
              if (res.status == "200") {
                this.barAreaColor = "#4cae4c";
                this.barAreaBorderColor = "#5cb85c";
                this.text = "验证成功";
                this.bindingClick = false;
                if (this.mode == "pop") {
                  setTimeout(() => {
                    this.$parent.clickShow = false;
                    this.refresh();
                  }, 1500);
                }
                this.$parent.$emit("success", { captchaVerification });
              } else {
                this.$parent.$emit("error", this);
                this.barAreaColor = "#d9534f";
                this.barAreaBorderColor = "#d9534f";
                this.text = "验证失败";
                setTimeout(() => {
                  this.refresh();
                }, 700);
              }
            })
            .catch(err => {
              Message.error(err.msg);
            });
          // ajCaptchaCheck(data).then(res => {
          //   if (res.repCode == "0000") {
          //     this.barAreaColor = "#4cae4c";
          //     this.barAreaBorderColor = "#5cb85c";
          //     this.text = "验证成功";
          //     this.bindingClick = false;
          //     if (this.mode == "pop") {
          //       setTimeout(() => {
          //         this.$parent.clickShow = false;
          //         this.refresh();
          //       }, 1500);
          //     }
          //     this.$parent.$emit("success", { captchaVerification });
          //   } else {
          //     this.$parent.$emit("error", this);
          //     this.barAreaColor = "#d9534f";
          //     this.barAreaBorderColor = "#d9534f";
          //     this.text = "验证失败";
          //     setTimeout(() => {
          //       this.refresh();
          //     }, 700);
          //   }
          // });
        }, 400);
      }
      if (this.num < this.checkNum) {
        this.num = this.createPoint(this.getMousePos(this.$refs.canvas, e));
      }
    },

    // 获取坐标
    getMousePos: function(obj, e) {
      var x = e.offsetX;
      var y = e.offsetY;
      return { x, y };
    },
    // 创建坐标点
    createPoint: function(pos) {
      this.tempPoints.push(Object.assign({}, pos));
      return ++this.num;
    },
    refresh: function() {
      this.tempPoints.splice(0, this.tempPoints.length);
      this.barAreaColor = "#000";
      this.barAreaBorderColor = "#ddd";
      this.bindingClick = true;
      this.fontPos.splice(0, this.fontPos.length);
      this.checkPosArr.splice(0, this.checkPosArr.length);
      this.num = 1;
      this.getPictrue();
      this.text = "验证失败";
      this.showRefresh = true;
    },

    // 请求背景图片和验证图片
    getPictrue() {
      const data = {
        captchaType: this.captchaType,
        clientUid: localStorage.getItem("point"),
        ts: Date.now() // 现在的時間戳
      };
      this.$axios
        .get(`ajcaptcha`, { params: data })
        .then(res => {
          if (res.status == "200") {
            this.pointBackImgBase = res.data.originalImageBase64;
            this.backToken = res.data.token;
            this.secretKey = res.data.secretKey;
            this.poinTextList = res.data.wordList;
            this.text = "请依次点击【" + this.poinTextList.join(",") + "】";
          } else {
            this.text = res.msg;
          }

          // 判断接口请求次数是否失效
          if (res.status == "6201") {
            this.pointBackImgBase = null;
          }
          this.$emit("getSuccess");

        })
        .catch(err => {
          Message.error(err.msg);
        });
      // ajCaptcha(data).then(res => {});
    },
    // 坐标转换函数
    pointTransfrom(pointArr, imgSize) {
      var newPointArr = pointArr.map(p => {
        const x = Math.round((310 * p.x) / parseInt(imgSize.imgWidth));
        const y = Math.round((155 * p.y) / parseInt(imgSize.imgHeight));
        return { x, y };
      });
      return newPointArr;
    }
  }
};
</script>
